<template>
  <!-- 添加或修改设备对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    :modal="false"
    top="74px"
    class="container-dailog transition-box"
    :class="$store.state.app.sidebar.opened ? 'openSidebar' : 'hideSidebar'"
  >
    <el-steps :active="steps" finish-status="success" align-center>
      <el-step title="选择一组“边缘端”网关"></el-step>
      <el-step title="设置透传目标，作为“管理端”"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <div class="border padding-lr-20 padding-top-20 margin-top-20">
      <el-form v-if="steps === 0" ref="activeForm" :model="activeForm" size="small" :inline="true" label-width="100px" :rules="activeRules">
        <el-form-item label="边缘端组名" prop="groupName">
          <el-input
            v-model="activeForm.groupName"
            placeholder="请输入组名"
            clearable
          />
        </el-form-item>
        <el-form-item label="所属组织" prop="deptId">
          <treeselect
            v-model="activeForm.deptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择所属组织"
          />
        </el-form-item>
      </el-form>
      <div class="flex margin-bottom-20">
        <div class="border flex-1 padding-20">
          <div class="text-16 text-bold">全部数据透传网关</div>
          <div style="height: 300px; overflow-y: scroll;">
            <div v-for="item in gateways" @click="addGatewayItemHandle(item)" class="flex justify-between margin-tb-10 pointer">
              {{ item.gatewayName }}
            </div>
          </div>
        </div>
        <div class="flex align-center margin-lr-20 text-24 text-gary text-gary">
          >>
        </div>
        <div class="border flex-1 padding-20" v-if="steps === 0">
          <div class="flex justify-between">
            <span class="text-16 text-bold">已选网关</span>
            <span>已选 {{iotEdgeEndList.length}}个</span>
          </div>
          <div style="height: 300px; overflow-y: scroll;">
            <div v-for="(item, index) in iotEdgeEndList" class="flex justify-between margin-tb-10">
              {{ item.gatewayName }}
              <span class="text-red pointer" @click="del(index)">删除</span>
            </div>
          </div>
        </div>
        <div class="border flex-1 padding-20" v-if="steps === 1">
          <div class="flex justify-between">
            <span class="text-16 text-bold">已选网关</span>
            <span>已选 {{iotManageEndList.length}}个</span>
          </div>
          <div style="height: 300px; overflow-y: scroll;">
            <div v-for="(item, index) in iotManageEndList" class="flex justify-between margin-tb-10">
              {{ item.gatewayName }}
              <span class="text-red pointer" @click="del(index)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <template v-if="steps === 0">
        <el-button type="primary" @click="submitForm">下一步</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
      <template v-if="steps === 1">
        <el-button @click="previous ">上一步</el-button>
        <el-button type="primary" @click="save ">保存</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { listGateway } from "@/api/iot/gateway";
  import { addPassthrough, updatePassthrough } from "@/api/iot/passthrough";
  export default {
    components: { Treeselect },
    props: {
      supThis: {
        type: Object,
        default: null,
      },
      deptOptions: {
        type: Array,
        default: () => [],
      }
    },
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        steps: 0,
        activeForm: {
          groupName: null,
          deptId: null
        },
        activeRules: {
          groupName: [
            { required: true, message: "边缘端组名能为空", trigger: "blur" },
          ],
          deptId: [
            { required: true, message: "所属组织不能为空", trigger: "blur" },
          ]
        },
        gateways: [],
        iotEdgeEndList: [],
        iotManageEndList: []
      }
    },
    mounted() {
      this.getGatewayList()
    },
    methods: {
      reset() {
        this.activeForm = {
          groupName: null,
          deptId: null
        }
        this.iotEdgeEndList = []
        this.iotManageEndList = []
      },
      getGatewayList() {
        listGateway({
          pageNum: 1,
          pageSize: 999
        }).then((response) => {
          this.gateways = response.rows;
        });
      },
      addGatewayItemHandle(item) {
        if(this.steps === 0) {
          const arr = new Set(this.iotEdgeEndList)
          arr.add(item)
          this.iotEdgeEndList = Array.from(arr)        
        }
        if(this.steps === 1) {
          const arr = new Set(this.iotManageEndList)
          arr.add(item)
          this.iotManageEndList = Array.from(arr)        
        }
      },
      del(index) {
        if(this.steps === 0) {
          this.iotEdgeEndList.splice(index,1)
        }
        if(this.steps === 1) {
          this.iotManageEndList.splice(index,1)
        }
      },
      submitForm() {
        this.$refs["activeForm"].validate((valid) => {
          if (valid) {
            if(this.steps === 0) {
              if(this.iotEdgeEndList.length === 0) {
                this.$message.error(`网关为必选项!`);
              }else {
                this.steps = 1
              }
            }
          }
        })
      },
      previous() {
        this.steps = 0
      },
      save() {
        if(this.iotManageEndList === 0) {
          this.$message.error(`网关为必选项!`);
        }else {
          if (this.activeForm.id != null) {
            const params = {
              id: this.activeForm.id,
              groupName: this.activeForm.groupName, // 边缘端组名
              deptId: this.activeForm.deptId, // 所属组织
              iotEdgeEndIdList: this.iotEdgeEndList.map((item) => {
                return item.id
              }),// “边缘端”网关
              iotManageEndIdList: this.iotManageEndList.map((item) => {
                return item.id
              }),//,// 透传目标
            }
            updatePassthrough(params).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
              this.supThis.getList();
            });
          } else {
            const params = {
              groupName: this.activeForm.groupName, // 边缘端组名
              deptId: this.activeForm.deptId, // 所属组织
              iotEdgeEndIdList: this.iotEdgeEndList.map((item) => {
                return item.id
              }),// “边缘端”网关
              iotManageEndIdList: this.iotManageEndList.map((item) => {
                return item.id
              }),//,// 透传目标
            }
            addPassthrough(params).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel();
              this.supThis.getList();
            });
          }
        }
      },
      cancel() {
        this.open = false
        this.steps = 0
      }
    },
  }
</script>

<style lang="scss" scoped>
::v-deep .el-steps .is-process, ::v-deep .el-steps .is-success {
  color: #3c78ff;
  border-color: #3c78ff;
}
</style>